<template>
<!--面包屑-->
<div style="margin-bottom: 30px;">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="/RoleModule/ShowRoleList">角色管理</a>
    </el-breadcrumb-item>
    <el-breadcrumb-item>角色添加</el-breadcrumb-item>
  </el-breadcrumb>
</div>

  <el-form ref="ruleFormRef" style="max-width: 600px;margin: auto;" :model="form" :rules="rules" label-width="auto"
    class="demo-ruleForm" :size="formSize" status-icon>

    <el-form-item label="角色名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入角色名称" />
    </el-form-item>

    <el-form-item label="角色类别" prop="role_type">
      <el-input v-model="form.role_type" placeholder="请输入角色类别" />
    </el-form-item>

    <el-form-item label="数据范围" prop="data_scope">
      <el-select v-model="form.data_scope" placeholder="请选择数据范围">
        <el-option label="全部数据" :value="1" />
        <el-option label="公司已下载数据" :value="2" />
        <el-option label="个人数据" :value="8" />
      </el-select>
    </el-form-item>

    <el-form-item label="角色级别" prop="role_level">
      <el-select v-model="form.role_level" placeholder="请选择角色级别">
        <el-option label="请选择" :value="-1" />
        <el-option label="0级" :value="0" />
        <el-option label="1级" :value="1" />
        <el-option label="2级" :value="2" />
        <el-option label="3级" :value="3" />
        <el-option label="4级" :value="4" />
        <el-option label="5级" :value="5" />
        <el-option label="6级" :value="6" />
        <el-option label="7级" :value="7" />
        <el-option label="8级" :value="8" />
        <el-option label="9级" :value="9" />
        <el-option label="10级" :value="10" />
      </el-select>
    </el-form-item>

    <el-form-item label="是否启用" prop="useable">
      <el-radio-group v-model="form.useable">
        <el-radio :label="1">启用</el-radio>
        <el-radio :label="0">禁用</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import { useRoute, useRouter } from 'vue-router'

const route = useRoute();
const router = useRouter();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

onMounted(() => {

})

const form: any = reactive({
  name: "",
  role_type: "",
  data_scope: '',
  role_level: -1,
  useable: "",
})

const Data: any = ref([])

//校验
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
  ],
  role_type: [
    { required: true, message: '请输入角色类别', trigger: 'blur' },
  ],
  data_scope: [
    { required: true, message: '请输入数据范围', trigger: 'blur' },
  ],
  role_level: [
    { required: true, message: '请输入角色级别', trigger: 'blur' },
  ],
  useable: [
    { required: true, message: '请输入是否可用', trigger: 'blur' },
  ],
})

//提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let roleAdd:any = {
        name: form.name,
        role_type: form.role_type,
        data_scope: form.data_scope,
        role_level: form.role_level,
        useable: form.useable,
      }
      axios.post('http://1.117.93.87:8000/rbacxie/api/Role/roleCreate', roleAdd).then(res => {
        if(res.data.code == 200){
          ElMessage.success("添加成功");
          router.push('/RoleModule/ShowRoleList')
        }
        else if(res.data.code == 400){
          ElMessage.error("角色名称已存在")
        }
        else{
          ElMessage.error("添加失败")
        }
      }).catch(err => {
        console.log(err);

      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//取消
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped></style>